import React, { Component } from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import webviews from './js/webviews.js';
import { useSelector, useDispatch } from 'react-redux';
import * as store from './reducers/browserSlice';
import TestC from './TestC'
// const darkTheme = createTheme({ 
//   components: { 
//     MuiTab: { 
//       styleOverrides:  
//         { root: { "&.Mui-selected": { color: "white" } } } 
//       } 
//   } 
// });
export default function Browser(props){
  const dispatch = useDispatch();
  const ro = new ResizeObserver((entries, observer) => {
    // console.log('<<<<<<<<<<<<<<<<<<<<<Body has resized!');
    // console.log(entries[0].contentRect);
    webviews.resize2(entries[0].contentRect.height);
    // observer.disconnect(); // Stop observing
  });
  const target = React.useRef(null);
  React.useEffect(()=>{
    ro.observe(target.current); // Watch dimension changes on body
    dispatch(store.sessionRestoreAction());
  },[])
    // console.log('render Browser============================');
    // console.log(useSelector((state) =>{state.browser.tab}))
    return (
        <div   ref={target} >
          <div style={{display:"flex",flexDirection:"column"}}>
            <input value={useSelector((state) => state.browser.url)} onChange={(e)=>{
              dispatch(store.actions.INPUT(e.target.value))
            }}></input>
            <button
              aria-label="Increment value"
              onClick={() =>{
               dispatch(store.actions.GO());
              }}
            >
              go
            </button>
            <span>{useSelector((state) => state.browser.value)}</span>
            <button
              aria-label="Increment value"
              onClick={() => dispatch(store.actions.INCREMENT())}
            >
              +
            </button>
            <span>{useSelector((state) => state.browser.tab).url}</span>
            <button onClick={()=>{
              dispatch(store.sessionRestoreAction());
            }}> load session</button>
            <TestC />
          </div>
        </div>
    );
}
        